<template>
	<!-- 拼团 -->
	<view class="Assemble">
		<image :src="imgs" mode="" class="top_img"></image>
		<view class="pingtuan_box">
			<!-- <uni-countdown
				class="time_down"
				colors="#FFFFFF"
				:background-color="newColor.color"
				:border-color="newColor.color"
				:day="times.day"
				:hour="times.hours"
				:minute="times.minutes"
				:second="times.seconds"
			></uni-countdown> -->
			<view class="list_s" v-for="(item, index) in GroupList" :key="index">
				<image :src="item.img" mode=""></image>
				<view class="goods_right">
					<p class="p1">
						<image :src="item.tag_img" mode="" v-if="item.tag_type==2"></image>
						<text class="hot" v-if="item.tag_type== 1" :style="{backgroundColor: newColor.color}">{{item.tag_content}}</text>
						<text class="name">{{item.title}}</text>
					</p>
					<p class="p2">
						<text class="text1">累计{{ item.sales }}份</text>
						<text style="margin: 0 10upx;">|</text>
						<text class="text2" :style="{ color: newColor.color }">剩余{{ item.inventory }}份</text>
					</p>
					<p class="p3">
						<text class="text1" :style="{ color: newColor.color }">¥{{ item.price || 0 }}</text>
						<text class="text2" v-if="item.disuse_price">¥{{ item.disuse_price }}</text>
					</p>
					<p class="goumai" :style="{ background: newColor.color }" @tap="jumpPingtuan(item)">去拼团</p>
				</view>
			</view>
		</view>
		<ourLoading isFullScreen :active="active" text="loading..." />
	</view>
</template>

<script>
import uniCountdown from '@/components/uni-countdown/uni-countdown.vue';
export default {
	components: {
		uniCountdown
	},
	data() {
		return {
			active: true,
			times: {},
			GroupList: [],
			imgs:''
		};
	},
	methods: {
		ongetGroupList() {
			//获取拼团列表
			this.request('goods/getGroupList', {}).then(res => {
				console.log(res);
				this.imgs = res.data[0].img
				this.GroupList = res.data[0].group_goods;
				this.setTime(res.data);
				setTimeout(() => {
					this.active = false;
				}, 200);
			});
		},
		setTime(data) {
			//计算时间
			// 判断当前是否在拼团开启时间内
			console.log(data);
			let start = new Date(Number(data[0].start_time) * 1000);
			let end = new Date(Number(data[0].end_time) * 1000);
			let now = new Date();
			if (now >= start && now <= end) {
				console.log('在拼团时间内');
			}
			let time = {};
			let newtime = end - now;
			console.log(newtime);
			// 获取剩余天数
			time.day = Math.floor(newtime / 1000 / 60 / 60 / 24);
			var daysRound = Math.floor(time.day);
			time.hours = Math.floor(newtime / 1000 / 60 / 60 - 24 * daysRound);
			var hoursRound = Math.floor(time.hours);
			time.minutes = Math.floor(newtime / 1000 / 60 - 24 * 60 * daysRound - 60 * hoursRound);
			var minutesRound = Math.floor(time.minutes);
			time.seconds = Math.floor(newtime / 1000 - 24 * 60 * 60 * daysRound - 60 * 60 * hoursRound - 60 * minutesRound);
			console.log(time);
			this.times = time;
		},
		jumpPingtuan(item) {
			this.$Router.push({
				path: '/pagesA/pages/goods/assembleDetails',
				query: {
					goodid: item.goods_id
				}
			});
		}
	},
	onShow() {
		this.ongetGroupList();
	}
};
</script>

<style lang="scss" scoped>
.Assemble {
	overflow: hidden;
	.top_img {
		width: 100vw;
		height: 28vw;
		display: block;
	}
	.pingtuan_box {
		margin-top: 30upx;
		padding: 0 30upx;
	}
	.list_s {
		box-sizing: border-box;
		background-color: #ffffff;
		overflow: hidden;
		height: 290rpx;
		width: 100%;
		margin-top: 20upx;
		margin-bottom: 20upx;
		box-shadow: 0px 0px 21upx 0px rgba(255, 74, 44, 0.1);
		padding: 28upx;
		padding-right: 10upx;
		border-radius: 10upx;
		padding-left: 20upx;
		image {
			width: 200upx;
			height: 200upx;
			float: left;
			border-radius: 15upx;
			margin-right: 20upx;
		}
		.goods_right {
			position: relative;
		}
		.p1 {
			font-size: 32upx;
			color: #000000;
			overflow: hidden;
			height: 90upx;
			image{
				width: 40upx;
				height: 40upx;
				float: left;
				margin-right: 10upx;
			}
			.hot{
				font-size: 20upx;
				height: 40upx;
				line-height: 40upx;
				padding: 0upx 10upx;
				color: #FFFFFF;
				background-color: #F23A3A;
				border-radius: 8upx;
				margin-right: 10upx;
				float: left;
				box-sizing: border-box;
				margin-top: 5upx;
			}
			.name{
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
		}
		.p2 {
			font-size: 24upx;
			height: 26upx;
			line-height: 26upx;
			margin-top: 10upx;
			color: #333333;
			margin-bottom: 10upx;
			.text1 {
				color: #646464;
			}
			.text2 {
				color: #f23a3a;
			}
		}
		.p3 {
			margin-top: 20upx;
			.text1 {
				font-size: 36upx;
				color: #f23a3a;
				margin-right: 20upx;
			}
			.text2 {
				font-size: 24upx;
				font-family: Droid Sans Fallback;
				font-weight: 400;
				text-decoration: line-through;
				color: rgba(100, 100, 100, 1);
			}
		}
		.goumai {
			font-size: 24upx;
			width: 150upx;
			height: 56upx;
			line-height: 56upx;
			text-align: center;
			background: rgba(242, 58, 58, 1);
			border-radius: 28upx;
			color: #ffffff;
			position: absolute;
			right: 0upx;
			bottom: -60upx;
		}
	}
}
</style>
